//组件文件
const Lists = ( {pokemonsLists} ) => {
    const imgCSS = {
        border:"1px solid darkorange",
        borderRadius:"10px",
    }
    
    return (
        <ul className="ul-container">
            {
            //this的状态来自父组件，得利用props
            // this.state.filteredPokemons
            pokemonsLists.map((pokemon) => {//状态值并没有与index产生联系
                    //图形遍历
                    return(
                        <div key={ pokemon.url }>
                            <li >{ pokemon.name }</li>
                            <img 
                                src={ `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} 
                                style= {imgCSS}//style要传入一个对象，jsx里逻辑需要用大括号，对象用键值对
                            />
                            
                        </div>
                    );
            })       
            }
        </ul>
     );
}
/*
class Lists extends React.Component {
    render(){
        const { pokemonsLists } = this.props
        const imgCSS = {
            border:"1px solid darkorange",
            borderRadius:"10px",
        }
        return (
            <ul className="ul-container">
                {
                //this的状态来自父组件，得利用props
                // this.state.filteredPokemons
                pokemonsLists.map((pokemon) => {//状态值并没有与index产生联系
                        //图形遍历
                        return(
                            <div key={ pokemon.url }>
                                <li >{pokemon.name}</li>
                                <img 
                                    src={ `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} 
                                    style= {imgCSS}//style要传入一个对象，jsx里逻辑需要用大括号，对象用键值对
                                />
                                
                            </div>
                        );
                })       
                }
            </ul>
         );
    }
}
*/